<!--
  新闻详情页
  创建人：www
  日期：20190507
 -->
<template lang="pug">
  kalix-master
    div.content-width
      div.content-top
        // 课程章节目录
        div.menu(v-show="noteShow === false")
          p.chapter 课程章节
          div.chapter-box
            ul
              li(v-for="(menuFirst, indexFirst) in chapters" :key="indexFirst")
                div.chapter-name {{menuFirst.menuName}}
                ul
                  li(v-for="(menuSecond, indexSecond) in chapters[indexFirst].children" :key="indexSecond" @click="changeVideo(indexSecond,indexFirst)")
                    div.chapter-name.class(:class="{selected: isTrue == indexSecond && indexFirst === acIndex}") {{menuSecond.menuName}}
        div.noteIn(v-show="noteShow === true")
          div.note-title
            p.label 笔记标题：
            input(v-model="noteTitle")
          div.note-content
            p.label 笔记内容：
            textarea(v-model="noteContent")
          div.upload-img
            p.label 上传图片：
            div.img-box
              el-upload.avatar-uploader(
              action="http://localhost:8181/camel/rest/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :limit="4"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-change="handleChange"
              )
                i.el-icon-plus.avatar-uploader-icon
              el-dialog(:visible.sync="dialogVisible")
                img(width="100%" :src="dialogImageUrl" alt="" v-model="noteEnclosure")
          div.note-open
            p.label 是否公开：
            div.open-box
              el-radio(label="公开" v-model="opened") 公开
              el-radio(label="不公开" v-model="opened") 不公开
          button(@click="save") 保存
        // 视频播放器
        div.video
          Video(:videoSrc="videoSrc" width="800" height="420")
          <!--iframe(scrolling="no" id="main" name="main" frameborder="0"  src="static/changjing/index.html" style="width:960px;height:560px;")-->
          div.barrage
            button(@click="onNote") 笔记
            span.switch(@click="toggle")
              div.switch-btn(:class="{switchOn: checked,switchOff:!checked}" onselectstart="return false") 弹
            input.barrage-input(v-model="newBarrage")
            button.send(@click="send") 发送
          div.video-detail
            div.left
              p.title {{item.name}}
              span 授课教师：{{item.uname}}
              span 课时数：{{item.classHour}}
              span 学分：{{item.credit}}
            div.right
              button.collect(@click="onCollect" :class="{collectOn:collected,collectOff:!collected}") {{collectVal}}
              img(src="/static/video/code.png" @mouseover="codeOver" @mouseout="codeOut")
              div.QR-code(v-show='showCode')
                img(src="/static/video/qrcode.jpg")
      div.content-bottom
        // 左侧导航
        div.left
          ul
            li(v-for="(item,index) in items" :key="index" @click="select(index)" :class="{'chose': flag==index}") {{item}}
        div.right
          // 课程简介
          div.course-introduction(v-show="flag === 0")
            p {{item.introduction}}
          // 教师简介
          div.teacher-introduction(v-show="flag === 1")
            p {{item.teacherintroduce}}
          // 课程笔记
          div.course-notes.main-content(v-show="flag === 2")
            div.div.min-height
              Note(:notes="notes" @getNote="getNote")
            div.note-bottom
              el-pagination.page(
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :pager-count= 9
              prev-text="上一页"
              next-text="下一页"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="notes.length"
              )
              div.clear
          // 课程讨论
          div.course-discussion.main-content(v-show="flag === 3")
            div.min-height
              Discuss(:discussArray="discussArray" @getDiscuss="getDiscuss")
            div.discuss-bottom
              el-pagination.page(
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :pager-count= 9
              prev-text="上一页"
              next-text="下一页"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="discussArray.length"
              )
              div.clear
          // 课程评论
          div.course-review.main-content(v-show="flag === 4")
            div.min-height
              Review(:reviewData="reviewData" @getAllMessage="getAllMessage")
            div.discuss-bottom
              el-pagination.page(
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :pager-count=9
              prev-text="上一页"
              next-text="下一页"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total"
              )
              div.clear
</template>

<script>
  export default {
    // props: {
    //   discussArray: Array
    // },
    data() {
      return {
        noteContent: null,
        noteTitle: null,
        noteEnclosure: null,
        item: this.$route.query.course,
        fileList: [],
        videoSrc: '/static/movie/77816626-1-6.mp4',
        noteShow: false,
        items: [
          '课程简介',
          '教师简介',
          '课程笔记',
          '课程讨论',
          '课程评论'
        ],
        dialogImageUrl: '',
        dialogVisible: false,
        likeData: {
          isTrue: false,
          val: 502
        },
        notes: [
          // {
          //   src: '/static/video/u1176.png',
          //   imgSrc: [
          //     '/static/video/u1164.png',
          //     '/static/video/u1166.png',
          //     '/static/video/u1168.png',
          //     '/static/video/u1170.png'
          //   ],
          //   likeSrc: '/static/video/u1158.png',
          //   name: '用户名1',
          //   title: '笔记标题',
          //   content: '',
          //   likeVal: 100,
          //   commentVal: 110,
          //   lighted: false,
          //   recChose: false
          // }
        ],
        discussArray: [
          {
            personImg: '/static/video/u1176.png',
            date: '04-05',
            time: '15:00',
            subject: '',
            likeVal: 0,
            likeSrc: '/static/video/u1158.png',
            discussShow: false,
            showNum: 1,
            personName: '用户名',
            commentVal: 200,
            secondPerson: [
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                likeSrc: '/static/video/u1158.png',
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              },
              {
                personImg: '/static/video/u1176.png',
                date: '04-05',
                time: '15:00',
                discussShow: false,
                repeatName: '',
                repeatContent: '',
                subject: '',
                likeVal: 0,
                likeSrc: '/static/video/u1158.png',
                personName: '用户名',
                discussFirst: ''
              }
            ]
          }
        ],
        reviewData: {
          tags: [
            {
              text: '快速评论1',
              chose: false
            },
            {
              text: '快速评论1',
              chose: false
            },
            {
              text: '快速评论1',
              chose: false
            },
            {
              text: '快速评论1',
              chose: false
            }
          ],
          review: [
            {
              personImg: '/static/video/u1176.png',
              personName: '用户名',
              date: '04-05',
              time: '15:00',
              tagChose: [],
              subject: ''
            }
          ]
        },
        chapters: [
          {
            menuName: '第一章 章节名称',
            children: [
              {menuName: '1.1 课程名称'},
              {menuName: '1.2 课程名称'},
              {menuName: '1.3 课程名称'}
            ]
          },
          {
            menuName: '第一章 章节名称',
            children: [
              {menuName: '1.1 课程名称'},
              {menuName: '1.2 课程名称'},
              {menuName: '1.3 课程名称'}
            ]
          },
          {
            menuName: '第一章 章节名称',
            children: [
              {menuName: '1.1 课程名称'},
              {menuName: '1.2 课程名称'},
              {menuName: '1.3 课程名称'}
            ]
          },
          {
            menuName: '第一章 章节名称',
            children: [
              {menuName: '1.1 课程名称'},
              {menuName: '1.2 课程名称'},
              {menuName: '1.3 课程名称'}
            ]
          }
        ],
        discusses: [],
        currentPage: 1, // 初始页
        pageSize: 3,
        flag: 0,
        isTrue: 0,
        acIndex: 0,
        checked: true,
        newBarrage: '',
        opened: '公开',
        imageUrl: '',
        collected: false,
        collectVal: '收藏该课程',
        showCode: false,
        total: null
      }
    },
    metaInfo: {
      title: 'This about us'
    },
    name: 'About',
    mounted() {
      this.getNote()
      this.getDiscuss()
      this.getQuickComment()
      this.getAllMessage()
    },
    methods: {
      handleChange(file, fileList) {
        console.log('file=========', file)
        console.log('fileList=========', fileList)
        this.fileList.push(file.url)
      },
      save() {
        console.log('ccccc', this.noteEnclosure)
        console.log('asasasasasas===', this.fileList)
        this.noteShow = false
        this.axios.request({
          method: 'POST',
          url: 'camel/rest/mooc/notes',
          data: {
            userId: -1,
            userName: 'admin',
            cid: this.discussArray[0].cid,
            cname: this.discussArray[0].cname,
            noteTitle: this.noteTitle,
            noteContent: this.noteContent,
            noteEnclosure: this.noteEnclosure,
            noteUpcounts: 0
          }
        }).then(res => {
          this.getNote()
          this.$emit('getNote')
        })
      },
      getNote() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/notes/getAllNote',
          params: {
            cid: this.$route.query.course.id
          }
        }).then(res => {
          this.notes = res.data.data
          this.notes.forEach(item => {
            item.noteEnclosure = item.noteEnclosure.split(',')
          })
        })
      },
      getDiscuss() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/discusss/getAllDiscuss',
          params: {
            cid: this.$route.query.course.id
          }
        }).then(res => {
          this.discussArray = res.data.data
          console.log('this.discussArray', this.discussArray)
          // this.notes.forEach(item => {
          //   item.noteEnclosure = item.noteEnclosure.split(',')
          // })
          if (res.data.totalCount !== 0) {
            this.total = res.data.totalCount
          }
        })
      },
      getQuickComment() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/quickComments'
        }).then(res => {
          this.reviewData.tags = res.data.data
        })
      },
      getAllMessage() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/messages/getAllMessage',
          params: {
            cid: this.$route.query.course.id
          }
        }).then(res => {
          this.reviewData.review = res.data.data
          if (res.data.totalCount !== 0) {
            this.total = res.data.totalCount
          }
          console.log(res.data.data, 'res.data.data')
          console.log('this.reviewData=========', this.reviewData)
        })
      },
      select(index) {
        this.flag = index
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage
        console.log(this.currentPage) // 点击第几页
      },
      // handleUserList() {
      //   this.$http.get('http://localhost:3000/userList').then(res => { // 这是从本地请求的数据接口，
      //     this.userList = res.body
      //   })
      // }
      changeVideo(index1, index2) {
        this.isTrue = index1
        this.acIndex = index2
        this.videoSrc = '../'
        this.$nextTick(() => {
          this.$refs.videoPlay.play()
        })
      },
      toggle() {
        this.$refs.videoPlay.hide()
        if (this.checked === true) {
          this.checked = false
        } else {
          this.$refs.videoPlay.show()
          this.checked = true
        }
      },
      send() {
        this.$nextTick(() => {
          this.$refs.videoPlay.newDanmu(this.newBarrage)
          this.newBarrage = ''
        })
      },
      onNote() {
        if (this.noteShow === false) {
          this.noteShow = true
        } else {
          this.noteShow = false
        }
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      onCollect() {
        if (this.collected === false) {
          this.collected = true
          this.collectVal = '取消收藏'
        } else {
          this.collected = false
          this.collectVal = '收藏该课程'
        }
      },
      codeOver() {
        this.showCode = true
      },
      codeOut() {
        this.showCode = false
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .content-width
    width 1200px
    margin 0 auto

  .menu
    background-color #F2F2F2
    /*width 375px*/
    width 375px
    padding-left 25px
    /*padding-top 30px*/
    padding-top 17px
    padding-bottom 30px
    display inline-block
    .chapter
      font-size 24px
      margin-bottom 33px
      color #666
    .chapter-box
      height 456px
      overflow auto
      .chapter-name
        font-size 18px
        margin-bottom 24px
        color #333
      .selected
        color #f93 !important
      .class
        cursor pointer
      .class:hover
        color #f93

  .noteIn
    display inline-block
    width 252px
    padding 19px 73px
    border 1px solid rgb(244, 244, 244)
    div
      .label
        display inline-block
        vertical-align top
        font-size 16px
        line-height 30px
    .note-title
      input
        height 19px
        margin 2.5px 0
        width 168px
    .note-content
      margin-top 10px
      textarea
        width 166px
        height 220px
        overflow-y auto
        resize none
    .upload-img
      margin-top 22px
      .img-box
        width 172px
        height 166px
        overflow hidden
        display inline-block
    .note-open
      .open-box
        display inline-block
        line-height 30px
    button
      width 80px
      height 30px
      background-color #f92
      border none
      border-radius 5px
      color #fff
      margin 0 auto
      display block
      margin-top 20px

  .video
    display inline-block
    vertical-align top
    .barrage
      width 100%
      height 53px
      background-color rgba(0, 0, 0, .5)
      display flex
      align-items center
      button
        display inline-block
        background-color #999999
        width 60px
        height 25px
        border-radius 12.5px
        color #fff
        border none
        margin-left 24px
        margin-right 20px
      .switch
        display inline-block
        background-color #999
        border-radius 12.5px
        width 70px
        height 25px
        cursor pointer
        .switch-btn
          width 50px
          height 25px
          border-radius 12.5px
          background-color #f93
          color #fff
          text-align center
          line-height 25px
          -moz-user-select none
        .switchOff
          transform: translateX(20px)
          transition-duration 0.3s
          background-color #666
        .switchOn
          transform: translateX(0px)
          transition-duration 0.3s
          background-color #f93
      .barrage-input
        width 540px
        height 25px
        line-height 25px
        font-size 16px
        padding 0
        padding-left 10px
        border-radius 5px 0 0 5px
        border none
        margin-left 14px
      .send
        margin 0
        width 50px
        height 25px
        border-radius 0 5px 5px 0
        background-color #f93
    .video-detail
      width 800px
      height 100px
      .left
        margin-left 12px
        float left
        .title
          margin-top 26px
          font-size 18px
          font-weight bold
          margin-bottom 14px
        span
          font-size 16px
          color #999
          margin-right 25px
      .right
        float right
        margin-top 35px
        position relative
        .collect
          background-color #FF9933
          border 1px solid #f92
          width 200px
          height 43px
          border-radius 22.5px
          color #fff
          font-size 16px
          line-height 43px
          text-align center
          display inline-block
          margin-right 18px
          vertical-align middle
        .collectOn
          background-color #e4e4e4
          color #666666
          border none
        .collectOff:hover
          background-color rgba(255, 153, 51, .2)
          color #666666
          border 1px solid #f92
        img
          display inline-block
          vertical-align middle
        .QR-code
          position absolute
          background-image url("/static/video/ewm.png")
          width 160px
          height 177px
          right -44px
          z-index 9999
          img
            display block
            margin 0 auto
            margin-top 28px
            height 140px
            width 140px

  .content-bottom
    width 1200px
    min-height 753px
    padding-bottom 20px
    border 1px solid #ccc
    margin-top 25px
    .left
      width 170px
      display inline-block
      vertical-align top
      ul
        li
          width 100%
          height 60px
          margin-bottom 2px
          background-color #f2f2f2
          color #999
          font-size 20px
          line-height 60px
          text-align center
          cursor pointer
    .right
      vertical-align top
      display inline-block
      width 1030px
      .course-introduction
      .teacher-introduction
        width 930px
        margin 0 auto
        line-height 30px
        margin-top 35px
        font-size 16px
        text-indent 2em
        color #666
      .course-notes
        width 940px
        margin 0 auto
        padding-top 15px
      .course-discussion
      .course-review
        width 940px
        margin 0 auto
        padding-top 15px

  .chose
    background-color #fff !important
    border-left 3px solid #FF9933
    color #FF9933 !important

  .main-content
    .el-pagination
      float right

  .discuss-bottom
    .page
      margin-top 10px

  .min-height
    min-height 655px
    margin-bottom 20px

</style>
